<template>
<aside class="hide-for-small-only et-nav-bar">

  <slot name="brand"></slot>

  <div class="et-nav-wrap">
    <ul :id="id" class="vertical menu">
      <menu-items v-for="(item, idx) in items"
                  :item="item"
                  :is-drawer-nav="isDrawerNav"
                  :key="idx"
                  :handler="setActiveClass"
                  :activeItemPosition="activeItemPosition" />
    </ul>
  </div>

</aside>
</template>

<script>
import MenuItems from './MenuItems';

export default {

  components: {
    MenuItems
  },

  props: {
    items: {
      type: Array,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    handler: {
      type: Function,
      default: () => {}
    },
    activeItemPosition: {
      type: String
    }
  },

  data() {
    return {
      isDrawerNav: false
    };
  },

  watch: {
    activeItemPosition(val) {
      if (val.split('-').length === 1 && $(`#${this.id} .et-topmenu-active`).data('nav-position') !== val) {
        this.setActiveClass(val);
      } else if ($(`#${this.id} .et-submenu-active`).data('nav-position') !== val) {
        this.setActiveClass(val);
        this.highlight2ndLevelItem(val);
      }
    }
  },

  methods: {

    setActiveClass(itemPosition) {

      $(`#${this.id} .et-submenu-active`).removeClass('et-submenu-active');
      $(`#${this.id} .et-topmenu-active`).removeClass('et-topmenu-active');

      let posArray = itemPosition.split('-');

      let parentItemIdx = posArray[0];
      $($(`#${this.id} > li`)[parentItemIdx]).addClass('et-topmenu-active');

      if (posArray.length > 1) {
        $(`#${this.id} a[data-nav-position="${itemPosition}"]`).addClass('et-submenu-active');
      }

      this.highlight2ndLevelItem(itemPosition);
      this.handler(itemPosition);

    },

    expandActiveMenu(activeItemPosArray) {

      if (activeItemPosArray.length > 1) {

        $(`#${this.id}`).foundation('down', $(`#${this.id} ul[data-nav-position="${activeItemPosArray[0]}"]`));

        if (activeItemPosArray.length > 2) {
          $(`#${this.id}`).foundation('down', $(`#${this.id} ul[data-nav-position="${activeItemPosArray[0]}-${activeItemPosArray[1]}"]`));
        }

      }

    },

    highlight2ndLevelItem(itemPosition) {

      // Highlight 2nd level menu item if its subitems are hidden in the initialization phase.
      if (itemPosition.split('-').length == 3) {

        let parentItemPos = itemPosition.replace(/-\d+$/, '');
        if ($(`#${this.id} a[data-nav-position="${parentItemPos}"]`).next().attr('aria-hidden') === 'true') {
          $(`#${this.id} a[data-nav-position="${parentItemPos}"]`).addClass('et-submenu-active');
        }

      }

    }

  },

  mounted() {

    new Foundation.AccordionMenu($(`#${this.id}`), {
      "multiOpen": false
    });

    let activeItemPosArray = this.activeItemPosition.split('-');

    // Remove the highlight style for 2nd level menu item if its subitems are display.
    $(`#${this.id}`).on('down.zf.accordionMenu', (e, obj) => {

      if (this.activeItemPosition.startsWith(obj.data('nav-position'))
      && activeItemPosArray.length == 3
      && obj.prev().data('nav-position').toString().split('-').length > 1) {

        let parentItemPos = this.activeItemPosition.replace(/-\d+$/, '');
        $(`#${this.id} a[data-nav-position="${parentItemPos}"]`).removeClass('et-submenu-active');

      }

    });

    // Highlight 2nd level menu item if its subitems are hidden.
    $(`#${this.id}`).on('up.zf.accordionMenu', (e, obj) => {

      if (this.activeItemPosition.startsWith(obj.data('nav-position'))
      && activeItemPosArray.length == 3) {

        let parentItemPos = this.activeItemPosition.replace(/-\d+$/, '');
        $(`#${this.id} a[data-nav-position="${parentItemPos}"]`).addClass('et-submenu-active');

      }

    });

    $('.et-nav-wrap').slimScroll({
      height: '100%'
    });

    this.expandActiveMenu(activeItemPosArray);
    this.setActiveClass(this.activeItemPosition);

  }

};
</script>
